<template>
    <div>
        <el-dialog :title="isAdd ? '添加管理员' : '修改管理员'" :visible.sync="isShow" center :before-close="offCheck">
            <el-form :model="userInfo" :rules="rules" label-width="100px" ref="userForm">
                <el-form-item label="所属角色" prop="roleid">
                    <el-select v-model="userInfo.roleid" placeholder="请选择">
                        <el-option v-for="item in roleList" :key="item.id" :label="item.rolename" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户名称" prop="username">
                    <el-input v-model="userInfo.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="userInfo.password"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-switch v-model="userInfo.status" active-color="#13ce66" inactive-color="#ccc" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="offCheck">取 消</el-button>
                <el-button type="primary" @click="addUser">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
// 引入辅助性函数
import { mapGetters, mapActions } from 'vuex';
// 引入接口地址
import { userAdd, userEdit, userInfo } from "../../request/api"
export default {
    props: ["isShow", "isAdd"],
    data() {
        return {
            userInfo: {
                roleid: "",
                username: "",
                password: "",
                status: 1
            },
            rules: {
                username: [
                    { required: true, message: '请输入管理员名称', trigger: 'blur' },
                    { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
                ],
                roleid: [
                    { required: true, message: '请输入所属角色', trigger: 'blur' },
                ]
            },
        };
    },
    computed: {
        // 获取所属角色列表
        ...mapGetters({
            roleList: "role/getRoleList"
        })
    },
    methods: {
        // 点击取消
        offCheck() {
            // 子传父
            this.$emit("offCheck", false)
            // 清空表单信息
            this.$refs.userForm.resetFields()
            this.userInfo = {
                roleid: "",
                username: "",
                password: "",
                status: 1
            }
        },
        // 点击确定
        addUser() {
            this.$refs.userForm.validate((flag) => {
                if (flag) {
                    if (this.isAdd) {
                        // 调用添加接口
                        userAdd(this.userInfo).then(res => {
                            if (res.code == 200) {
                                this.$message.success(res.msg)
                                this.offCheck()
                                // 重新渲染当前页用户列表信息
                                this.getUseCount()
                                // 重新渲染管理员总数
                                this.getUserList()
                            } else {
                                this.$message.error(res.msg)
                            }
                        })
                    } else {
                        // 调用编辑接口
                        userEdit(this.userInfo).then(res => {
                            if (res.code == 200) {
                                this.$message.success(res.msg)
                                this.offCheck()
                                // 重新渲染当前页用户列表信息
                                this.getUseCount()
                                // 重新渲染管理员总数
                                this.getUserList()
                            } else {
                                this.$message.error(res.msg)
                            }
                        })
                    }
                } else {
                    // 错误提示
                    this.$message.error("请输入正确的内容");
                }
            })
        },
        ...mapActions({
            // 获取所属角色信息的行动
            getRoleList: "role/roleList_Action",
            // 重新渲染当前页用户列表信息
            getUserList: "user/userList_Action",
            // 重新渲染管理员总数
            getUseCount: "user/userCount_Action"
        }),
        // 管理员编辑数据回显
        getOneUser(uid) {
            // 调用查询一条管理员信息接口
            userInfo({ uid }).then(res => {
                if (res.code == 200) {
                    // 数据回显
                    this.userInfo = res.list
                    this.userInfo.password = ""
                }
            })
        }
    },
    mounted() {
        // 判断是否有所属角色信息，如果没有则调用获取角色信息接口
        if (this.roleList.length == 0) {
            this.getRoleList()
        }
    }
};
</script>

<style scoped>
</style>
